<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for</title>
    <script src="../../js/vue3.js"></script>
    <style>
        #app {
            margin: 2rem auto;
            width: 30%;
        }
        
        p {
            font-size: 1.3rem;
            margin: 1rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            添加名称: <input type="text" v-model="newName">
        </p>
        <p>
            添加价格: <input type="text" v-model="newPrice">
        </p>
        <p>
            添加类型: <input type="text" v-model="newType">
        </p>
        <p>
            <button @click="addGame">添加</button>
        </p>
        <p v-for="item in games" :key="item.name">
            <input type="checkbox"> 名称:{{item.name}} 价格:{{item.price}} 类型:{{item.type}}
        </p>


    </div>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {
                    newName: "",
                    newPrice: "",
                    newType: "",
                    games: [{
                        name: "圣兽之王",
                        price: 300,
                        type: "策略"
                    }, {
                        name: "2042",
                        price: 46,
                        type: "射击"
                    }, {
                        name: "星露谷物语",
                        price: 20,
                        type: "经营"
                    }]
                }
            },
            methods: {
                addGame() {
                    let newGame = {
                        name: this.newName,
                        price: this.newPrice,
                        type: this.newType
                    }
                    this.games.unshift(newGame);
                }
            },
        });
        v_app.mount("#app");
    </script>
</body>

</html>